<template>
  <div>
    <div class="filter-container">
      <we-grid
          ref="weGrid"
          :items="uiConfig.items"
          :operationButtons="uiConfig.operationButtons"
          :query="queryParam"
          grid-url="grid1"
          operation-width="200px"
          @change="change"
          @onBeforeSearch="beforeSearch"
      >
        <template slot="status" slot-scope="scope">
          <table-status-icon
              :colorEnum="colorEnum"
              :status="scope.row.status && scope.row.status"
              :statusEnum="statusEnum"
          />
        </template>
      </we-grid>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    const paymentClassic = [
      { value: 1, name: 'qrCode' },
      { value: 2, name: 'transfer' },
      { value: 3, name: 'recharge' },
      { value: 4, name: 'cashout' } ]
    const paymentStatus = [
      { value: 0, name: 'fail' },
      { value: 1, name: 'success' },
      { value: 2, name: 'pre' },
      { value: 3, name: 'init' },
      { value: 4, name: 'expired' },
      { value: 5, name: 'waitForPayment' },
      { value: 6, name: 'done' }
    ]
    return {
      showDialog: false,
      localShowDialog: true,
      queryParam: {},
      editData: {},
      statusEnum: {
        1: 'enable',
        2: 'disable'
      },
      colorEnum: {
        1: 'approved',
        2: 'rejected'
      },
      uiConfig: {
        operationButtons: [
          {
            icon: 'el-icon-edit',
            title: '编辑',
            handle: (index, row) => {
              alert(`index:${ index }`);
              alert(`row:${ JSON.stringify(row) }`);
            }
          }
        ],
        editElements: [
          { label: "iPaymentId", key: 'paymentId', type: 'el-input' },
          { label: "iTitleCode", key: 'code', type: 'el-input' },
          { label: "iUserId", key: 'userId', type: 'el-input' },
          { label: "iMaskPhone", key: 'maskPhone', type: 'el-input' },
          { label: "iAmount", key: 'amount', type: 'el-input' },
          { label: "iSubject", key: 'subject', type: 'el-input' },
          { label: "iCaptcha", key: 'captcha', type: 'el-input' }
        ],

        searchElements: [
          {
            key: 'orderId',
            style: 'width:190px'
          },
          {
            key: 'paymentId',
            style: 'width:190px'
          },
          { label: "iUserName", key: 'userName' },
          { label: "iPhone", key: 'phone' },
          { key: 'createAt', type: 'el-date-picker', range: 'datetimerange' }
        ],
        disabledKeys: {},
        edit: {},
        queryParam: {},
        items: [
          { key: 'orderId' },
          { key: 'paymentId' },
          { key: 'amount' },
          { key: 'userName' },
          { key: 'phone' },
          {
            key: 'subject'
          },
          {
            key: 'createAt',
            filter: 'time'
          }, {
            width: '120px',
            key: 'paymentClass',
            filter: 'enums',
            enums: paymentClassic
          },
          {
            width: '80px',
            key: 'status',
            display: "iStatus",
            filter: 'enums',
            enums: paymentStatus
          }
        ]
      },
    }
  },
  methods: {
    beforeSearch({ queryParam }) {
      console.log(queryParam)
    },
    change() {
    },
    search() {
      this.showDialog = false
      this.$refs.weGrid.search()
    }
  }
}
</script>
